<template>
	<view class="min-h-screen bg-[#F7F8FA] relative">
		<up-navbar :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="goHome"></up-icon>
				</view>
			</template>
		</up-navbar>
		<view class="relative">
			<up-swiper :list="Detail.goodPic" height="375" :current="current" @change="onchangge"></up-swiper>
			<view
				class="py-[8rpx] px-[28rpx] absolute bg-[#000] bg-opacity-[0.25] text-[#fff] text-[24rpx] font-normal rounded-[8rpx] right-[30rpx] bottom-[30rpx]">
				{{ current + 1 }}/{{ Detail.goodPic.length }}
			</view>
		</view>
		<view class="m-[20rpx] p-[20rpx] bg-[#fff] rounded-[16rpx]">
			<view class="flex justify-between items-center">
				<view class="flex items-end ">
					<priceNumber :price="Detail.price"></priceNumber>
					<view class="ml-[10rpx] text-[26rpx] text-[#999] line-through">￥{{ Detail.demoPrice }}</view>
				</view>
				<image src="../static/share.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block" />
			</view>
			<view class="flex items-end justify-between mt-[4rpx] mb-[4rpx]">
				<view class="text-[30rpx] text-[#101010] font-bold">{{ Detail.name }}</view>
				<view class="text-[24rpx] text-[#999] font-normal">售出 {{ Detail.sale }}</view>
			</view>
			<view class="text-[24rpx] text-[#666] font-normal mb-[20rpx]">
				{{ Detail.info }}
			</view>
			<view class="bg-[#F7F8FA] rounded-[12rpx] px-[24rpx] py-[16rpx] flex items-center justify-between">
				<view class="" v-if="Detail.advantage.length > 0">
					<view class="mb-[6rpx] text-[26rpx] text-[#111] font-normal">{{ Detail.advantage[0].key }}</view>
					<view class="text-[22rpx] text-[#999] font-normal">{{ Detail.advantage[0].value }}</view>
				</view>
				<up-line direction="column" :hairline="false" length="48" v-if="Detail.advantage.length > 1"></up-line>
				<view class="" v-if="Detail.advantage.length > 1">
					<view class="mb-[6rpx] text-[26rpx] text-[#111] font-normal">{{ Detail.advantage[1].key }}</view>
					<view class="text-[22rpx] text-[#999] font-normal">{{ Detail.advantage[1].value }}</view>
				</view>
				<up-line direction="column" :hairline="false" length="48" v-if="Detail.advantage.length > 2"></up-line>
				<view class="" v-if="Detail.advantage.length > 2">
					<view class="mb-[6rpx] text-[26rpx] text-[#111] font-normal">{{ Detail.advantage[2].key }}</view>
					<view class="text-[22rpx] text-[#999] font-normal">{{ Detail.advantage[2].value }}</view>
				</view>
				<up-line direction="column" :hairline="false" length="48" v-if="Detail.advantage.length > 3"></up-line>
				<view class="" v-if="Detail.advantage.length > 3">
					<view class="mb-[6rpx] text-[26rpx] text-[#111] font-normal">{{ Detail.advantage[3].key }}</view>
					<view class="text-[22rpx] text-[#999] font-normal">{{ Detail.advantage[3].value }}</view>
				</view>
			</view>
		</view>
		<view class="px-[20rpx] mb-[20rpx]">
			<up-swiper :list="Detail.ad" round="16rpx" height="160rpx"></up-swiper>
		</view>
		<view class="px-[20rpx] bg-[#FFF]">
			<view class="py-[24rpx] pl-[20rpx] text-[30rpx] text-[#101010] font-normal">图文详情</view>
			<view class="border-[#eee] border-[1rpx] rounded-[12rpx] p-[20rpx]">
				<template v-for="(item, index) in Detail.contentInfo" :key="index">
					<view class="flex py-[20rpx]">
						<view class="text-[26rpx] text-[#999] font-normal w-[104rpx] mr-[64rpx] flex-shrink-0">{{
							item.key }}</view>
						<view class="text-[26rpx] text-[#111] font-normal">{{ item.value }}</view>
					</view>
					<up-line direction="row"></up-line>
				</template>
				<!-- <view class="flex py-[20rpx]">
					<view class="text-[26rpx] text-[#999] font-normal w-[104rpx] mr-[64rpx] flex-shrink-0">产地</view>
					<view class="text-[26rpx] text-[#111] font-normal">云南省昆明市嵩明县,云南省红河哈尼族彝族自治州开远市(以实际商品批次为准)</view>
				</view>
				<up-line direction="row"></up-line>
				<view class="flex py-[20rpx]">
					<view class="text-[26rpx] text-[#999] font-normal w-[104rpx] mr-[64rpx] flex-shrink-0">储存条件</view>
					<view class="text-[26rpx] text-[#111] font-normal">冷藏(0-4)℃</view>
				</view> -->
			</view>
		</view>
		<view>
			<up-parse :content="Detail.delivery"></up-parse>
		</view>
		<view class="m-[20rpx]">
			<view class=" flex justify-between rounded-tl-[16rpx] rounded-tr-[16rpx] bg-[#FFF] py-[24rpx] px-[20rpx]">
				<view>评论(15)</view>
				<view class="flex items-center">
					<view class="text-[28rpx] text-[#FE4E1D] font-normal">查看全部</view>
					<image src="../static/right.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block" />
				</view>
			</view>
			<up-line color="#eeeeee"></up-line>
			<view class="p-[20rpx] bg-[#fff] rounded-bl-[16rpx] rounded-br-[16rpx]">
				<view>
					<view></view>
					<view></view>
				</view>
			</view>
		</view>
		<view class="p-[20rpx] bg-[#FFF]">
			<up-parse :content="Detail.delivery"></up-parse>
		</view>
		<view class="h-[170rpx]"></view>
		<view
			class="flex py-[20rpx] pb-[30rpx] px-[30rpx] bg-[#fff] box-border fixed w-[100%] left-0 bottom-0 justify-between">
			<view class="flex flex-col items-center justify-center" @click="GoProductCat">
				<image src="../static/car.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block" />
				<view class="text-[24rpx] text-[#000] font-normal">购物车</view>
			</view>
			<view class="flex flex-col items-center justify-center">
				<image src="../static/kf.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block" />
				<view class="text-[24rpx] text-[#000] font-normal">客服</view>
			</view>
			<view class="flex flex-col items-center justify-center" @click="Collect">
				<image src="../static/sc-fill.png" v-if="Detail.isCollect" mode="scaleToFill"
					class="w-[48rpx] h-[48rpx] block" />
				<image src="../static/sc.png" v-else mode="scaleToFill" class="w-[48rpx] h-[48rpx] block" />
				<view class="text-[24rpx] text-[#000] font-normal">收藏</view>
			</view>
			<view class="flex border-[#ff4d58] border-[1rpx] rounded-[40rpx]">
				<view @click="checkSkuShow('加入购物车')"
					class="px-[40rpx] py-[20rpx] rounded-tl-[40rpx] rounded-bl-[40rpx] text-[26rpx] text-[#ff4d58] font-normal">
					加入购物车</view>
				<view @click="checkSkuShow('立即购买')"
					class="px-[56rpx] py-[20rpx] rounded-tr-[40rpx] rounded-br-[40rpx] text-[26rpx] text-[#ffffff] font-normal bg-[#ff4d58]">
					立即购买</view>
			</view>
		</view>
		<wu-sku v-model="skuShow" :data="skus" :themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			:btnConfirmText="title" notSelectSku="请选择完整的商品信息" @skuChange="skuChange" @confirm="skuConfirm">
		</wu-sku>
	</view>
</template>

<script setup>
import env from '@/config/common.js'
import { onLoad } from '@dcloudio/uni-app'
import priceNumber from '@/components/priceNumber'
import { reactive, ref } from 'vue';
import { GetGoodCollect, GetGoodDetail } from '../../API/product';
import { GetOrderGoods } from '../../API/order';
import { AddCar } from '../../API/car';
import { showToast } from '../../utils/utils';
const { goback, goHome } = useTable()
const { id, Detail, skus, getDetail, title, checkSkuShow, BuyNow, AddCart, Collect } = useDetail()
let baseUrl = env.API_BASE_URL_DEV
let skuShow = ref(false)
let current = ref(0)
// function checkSkuShow(){
// 	skuShow.value = !skuShow.value
// }
function onchangge(e) {
	current.value = e.current
}
function skuChange(e) {
	console.log(e);
}
function skuConfirm(e) {
	if (title.value == '加入购物车') {
		AddCart(e)
	} else {
		BuyNow(e)
	}
}
function useTable() {
	const goback = () => {
		uni.navigateBack()
	}
	const goHome = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	return {
		goback,
		goHome
	}
}
function useDetail() {
	const id = ref('')
	const Detail = ref({})
	const skus = ref([])
	const title = ref('')
	const getAddress = async (e) => {
		
	}
	const getDetail = async (id) => {
		let { data } = await GetGoodDetail(id)
		data.goodPic = data.goodPic.map(item => {
			item = baseUrl + item
			return item
		})
		data.ad = data.ad.split(',').map(item => {
			item = baseUrl + item
			return item
		})
		skus.value = data.productList.map(item => {
			return {
				id: item.id,
				price: item.price,
				stock: item.stock,
				logo: baseUrl + item.pic,
				sku_attrs: JSON.parse(item.productJson)
			}
		})
		Detail.value = data
	}
	const checkSkuShow = (value) => {
		skuShow.value = !skuShow.value
		title.value = value
	}
	const BuyNow = async (e) => {
		uni.getLocation({
			type: 'wgs84',
			geocode: true,//设置该参数为true可直接获取经纬度及城市信息
			success: async (res) => {
				// if (Detail.value.deliveryType) {
					let { data } = await GetOrderGoods({
						productId: e.sku.id,
						num: e.num,
						deliveryType: 0,
						lng: res.longitude,
						lat: res.latitude,

					})
					skuShow.value = !skuShow.value
					uni.navigateTo({
						url: '/pageOrder/ConfirmOrder/ConfirmOrder?item=' + JSON.stringify({
							...data
						})
					})
				// } else {
				// 	let { data } = await GetOrderGoods({
				// 		productId: e.sku.id,
				// 		num: e.num,
				// 		deliveryType: Detail.value.deliveryType[0],
				// 	})
				// 	skuShow.value = !skuShow.value
				// 	uni.navigateTo({
				// 		url: '/pageOrder/ConfirmOrder/ConfirmOrder?item=' + JSON.stringify({
				// 			...data
				// 		})
				// 	})
				// }
			},
			fail: (err) => {
				uni.showToast({
					title: '获取地址失败，将导致部分功能不可用',
					icon: 'none'
				});
			}
		})
	}
	const AddCart = async (e) => {
		let data = await AddCar({
			productId: e.sku.id,
			num: e.num,
			deliveryType: Detail.value.deliveryType
		})
		skuShow.value = !skuShow.value
		showToast('加入购物车成功')
	}
	const Collect = async (e) => {
		const { data } = await GetGoodCollect(Detail.value.goodId)
		await getDetail(id.value)
	}
	return { id, Detail, skus, getDetail, checkSkuShow, title, BuyNow, AddCart, Collect }
}
function GoProductCat(){
	uni.navigateTo({
		url:'/pageOrder/ShoppingCart/ShoppingCart'
	})
}
onLoad(async (options) => {
	id.value = options.id
	await getDetail(id.value)
})
</script>

<style lang="scss" scoped></style>